<script setup lang='ts'>
import { ref,reactive, onMounted } from 'vue'
import setUpTime from '@/utils/setUpTime'
import { GetLatestCMSClazz } from '@/api/publicApi'

defineProps({
  showItem: {
    type: Object,
    default: () => { }
  }
})

// 定义变量
// 控制弹框
const dialogVisible = ref(false)

// 查询条件
const formData = reactive({
  BarWheelMachineCode: '',
  DeviceCode: '',
  MeasurePointCode: '',
  stackTime: [],
  sensorType: '',
  Type: 20, //查询类型（10avg; 20:max; 30:min）
  timeInterval: 5 //时间间隔（目前仅支持5，10，30）
})

// 表单验证
const coverRules = {
  start: [ { required: true, message: '请选择开始时间', trigger: 'blur' } ],
  end: [ { validator: '请选择结束时间', trigger: 'blur' } ]
}
// 是否展示更多筛选条件
const isMore = ref(false)
// 查询类型
const searchTypeList = [
  {
    id: 10,
    type: '平均值'
  },
  {
    id: 20,
    type: '最大值'
  },
  {
    id: 30,
    type: '最小值'
  }
]
// 时间间隔列表
const timeIntervalList = [
  {
    title: '5分钟',
    value: 5
  },
  {
    title: '10分钟',
    value: 10
  },
  {
    title: '30分钟',
    value: 30
  }
]

// x轴坐标
const timeList: any = ref([])

// 图表数据
const seriesList: any = ref([])

// echarts数据
const options = reactive({
  tooltip: {
    trigger: 'axis'
  },
  legend: {},
  grid: {
    left: '3%',
    right: '3%',
    bottom: '1%',
    top: '15%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: timeList,
    axisLabel: {
      show: true,
      textStyle: {
        color: 'red'
      }
    },
    axisTick: {
      interval: 'auto'
    }
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      formatter: '{value}',
      show: true,
      textStyle: {
        color: 'red'
      }
    },
    axisPointer: {
      snap: true
    }
  },
  dataZoom: [
    {
      type: 'inside'
    }
  ],
  series: seriesList
})

// 定义函数
onMounted(() => {
  // getHistoryList()
})
// 获取历史数据
const getHistoryList = () => {
  // 折线图
  let param = {
    BarWheelMachineCode: localStorage.BarWheelMachineCode, //堆取料机编号
    // DeviceCode: showItem.deviceCode, //设备编号
    // MeasurePointCode: showItem.measurePointCode, //测点编号
    MinCreationTime: formData.stackTime[0], //最小采集时间
    MaxCreationTime: formData.stackTime[1], //最大采集时间
    QueryType: formData.Type, //查询类型（10avg; 20:max; 30:min）
    TimeInterval: formData.timeInterval //时间间隔（目前仅支持5，10，30）
  }

  GetLatestCMSClazz(param).then(res => {
    if (res.success) {
      let list = res.result.values
      timeList.value = []
      seriesList.value = [
        {
          name: 'X值',
          data: [],
          type: 'line',
          stack: 'Total'
        },
        {
          name: 'Y值',
          data: [],
          type: 'line',
          stack: 'Total'
        }
      ]

      list.forEach(item => {
        seriesList.value[0].data.push(item.xValue)
        seriesList.value[1].data.push(item.yValue)
        timeList.value.push(setUpTime.formatTime(item.id))
      })
    }
    // this.coverChartInit()
    // this.coverChartInit1();
  })
}
// 查询
const queryInfo = () => {
  seriesList.value = []
  getHistoryList()
}

// 向外暴露的函数与变量
defineExpose({
  dialogVisible
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    v-el-drag
    title="历史信息"
    :close-on-click-modal="false"
    :modal="false"
    width="80%"
  >
    <div class="inclinometer-dialog-box">
      <el-form
        ref="coverRef"
        :inline="true"
        :model="formData"
        :rules="coverRules"
        class="demo-form-inline"
      >
        <el-form-item
          v-if="isMore"
          label="查询类型"
        >
          <el-select
            v-model.number="formData.Type"
            size="small"
          >
            <el-option
              v-for="item in searchTypeList"
              :key="item.type"
              :label="item.type"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          v-if="isMore"
          label="时间间隔"
        >
          <el-select
            v-model.number="formData.timeInterval"
            size="small"
          >
            <el-option
              v-for="item in timeIntervalList"
              :key="item.title"
              :label="item.title"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="开始时间"
          prop="start"
        >
          <el-date-picker
            v-model="formData.stackTime"
            :clearable="false"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            type="datetimerange"
            format="YYYY-MM-DD HH时"
            value-format="YYYY-MM-DD HH:00:00"
            sizi="small"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="!isMore"
            type="primary"
            size="small"
            @click="isMore = true"
          >
            更多
          </el-button>
          <el-button
            v-else
            type="info"
            size="small"
            @click="isMore = false"
          >
            取消
          </el-button>

          <el-button
            type="primary"
            size="small"
            @click="queryInfo"
          >
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <div class="cover-box">
        <!-- <p>风速表</p> -->
        <div
          id="cover"
          ref="cover"
          style="width: 100%; height: 420px;"
        />
      </div>
    </div>
  </el-dialog>
</template>
